<<style>

</style>

<template>
    <div class="table">
        <!-- 头部菜单按钮 -->
        <div class="table-header">
             <Row>
                <Col span="12">
                    <Button type="error" icon="android-remove" @click="multiRemove">批量删除</Button>
                    <Button type="success" icon="android-add" @click="showAddModal">添加文章教程</Button>
                </Col>
                <Col span="12">
                    <div style="float:right;">
                        <Select v-model="typeSelected" style="width: 255px" multiple placeholder="按课程分类筛选" @on-change="getListByType">
                            <Option v-for="item in typeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select> 
                        <Input v-model="keywords" placeholder="请输入..." style="width: 150px"></Input>
                        <Button type="ghost" icon="ios-search">搜索</Button>
                    </div>
                </Col>
            </Row>
        </div>
        <can-edit-table refs="table" :hover-show="true" :edit-incell="true" :columns-list="columns" :table-data="list" :saveEditIncell="saveEditIncell" @on-selected="select"></can-edit-table>
        <!-- <Table border :columns="columns" :data="list"></Table> -->
        <Page :current.sync="page" :total="total_count" :page-size="limit" @on-change="getList"  show-total show-elevator :style="{'text-align': 'center'}"></Page>

        <Modal v-model="showarticle" title="添加文章课程" width="1200px" :mask-closable="false" :styles="{top: '30px'}">
	        <add-article ref="addModal" @addArtCancel="closeAddModal" ></add-article>
            <div slot="footer"></div>
	    </Modal>
        <Modal v-model="showedit" title="编辑文章课程" width="1200px" :mask-closable="false" :styles="{top: '30px'}">
	        <edit-article ref="editModal" @closeEdit="closeEditModal"></edit-article>
            <div slot="footer"></div>
	    </Modal>
    </div>
</template>

<script>
import http from '../../../libs/http';
import canEditTable from '../../components/canEditTable.vue';
import addArticle from './add';
import editArticle from './edit';
export default {
    components: {
        canEditTable,
        addArticle,
        editArticle
    },
    data () {
        return {
            showarticle: false,
            showedit:false,
            typeSelected: [], //选中的筛选分类
            typeList: [], //分类列表
            list: [],
            page: 1,
            limit: 15,
            total_count: 0,
            keywords: '',
            check_ids: [],  //多选框选中内容
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                /* { title: 'ID', key: 'id', align: 'center', width:'10%' }, */
                { title: '名称', key: 'name', align: 'center' },
                {
                    title: '课程分类',
                    key: 'class_id',
                    align: 'center',
                    width: '12%',
                    render: (h, param) => {
                        return  param.row.class_id.name 
                    }
                },
                { title: '排序值', key: 'listorder', align: 'center', width: '10%', editable: true},
                { title: '创建时间', key: 'create_time', align: 'center', width:'15%' },
                { title: '修改时间',key: 'update_time', align: 'center', width:'15%' },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: '15%',
                    render: (h, param) => {
                        return h('div', [
                            h('Button',{
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.edit(param.row.id)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(param.row.id)
                                    }
                                }
                            }, '删除')
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        getList( page ) {  //获取课程列表
            this.page = page;
            var that = this;
            var url = 'admin/course/index/type/2/page/' + page + '/limit/' + this.limit;
            var data = {
                params: {
                    class_id: this.typeSelected
                }
            }
            this.apiGet(url,data).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    that.list = res.data.list;
                    that.total_count = res.data.total_count;
                }
            })
        },
        getListByType (type) {  //按分类筛选课程列表
            this.getList(1);
        },
        showAddModal () {
            this.showarticle = true;
            this.$refs.addModal.getClassCate();
        },
        saveEditIncell (value) {   //点击单元格编辑方法
            var data = {
                id: value.id,
                name: value.name,
                describe: value.describe,
                class_id: value.class_id.id,
                class_type: 2, //课程类型为文章
                points: value.points,
                listorder: value.listorder
            }
            this.apiPost('admin/course/update', data).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    this.$Message.success('编辑成功');
                    this.getList(this.page);
                }
            })
        },
        edit( id ) {  //编辑按钮
            this.showedit = true;
            this.$refs.editModal.getCourseInfo(id);
        },
        remove(id) {  //删除按钮弹窗
            this.$Modal.confirm({
                    width: "200",
                    content: '确认是否删除',
                    onOk: () => {
                        this.delete(id);
                    }
                });
        },
        delete(id) {  //删除方法
            var url = 'admin/course/delete/'
            this.apiDelete(url, id).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    this.getList(this.page);
                    this.$Message.success(res.msg);
                    
                }
            });
        },
        closeAddModal() {  //关闭添加模态框
            this.showarticle = false;
            this.getList(this.page);
        },
        closeEditModal () {  //关闭编辑模态框
            this.showedit = false
            this.getList(this.page)
        },
        getClassCate() {  //获取课程分类信息
            var that = this;
            this.apiGet('admin/classCate/index/type/2').then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    that.typeList = res.data.list;
                }
            })
        },
        multiRemove () {  //批量删除前判断
            var length = this.check_ids.length;
            if (length == 0 ) {
                this.$Message.error('请选择要删除的数据');
            } else {
                this.$Modal.confirm({
                    width: "200",
                    content: '确认是否删除',
                    onOk: () => {
                        this.multiDelete();
                    }
                });
            }
        },
        multiDelete() {   //批量删除
            var url = 'admin/course/multiDelete';
            var data = {
                ids: this.check_ids
            }
            this.apiPost(url, data).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    this.$Message.success(res.msg);
                    this.getList(this.page);
                }
            })
        },
        select (selection) {  //获取选中的对象
            var obj = [];
            selection.forEach(function(val, index) {
                obj.push(val.id);
            }, this);
            this.check_ids = obj;
        },
    },
    created () {
        this.getList(this.page);
        this.getClassCate();
    },
    watch: {
        showarticle: function(status) {
            if (status == false) {
                this.$refs.addModal.handle
            }
        }
    },
    mixins: [http]
    
}
</script>